$(document).ready(function () {
    queryDataCountByDays();
    //queryOversize();
    alarmList();
    setMarkerIntoMap();


    AMap.plugin('AMap.Weather', function () {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive('栖霞区', function (err, data) {
            if (!err) {
                //获取温度
                $("#temperature").html("当前" + data.temperature + "℃");
                //获取天气
                $("#weather").html("天气  " + data.weather);
            }
        });
    });
    $('.map-nav').click(function () {
        $(this).addClass('selected').siblings().removeClass("selected");
        if ($(this).data('type') == 1) {
            clearInterval(mapVal);
            setMarkerIntoMap();
        } else {
            clearInterval(mapVal);
            $('.map-point').html('');
            $('.map-msg').remove();
            let res = {
                "status": 200,
                "message": "OK",
                "result": [
                    {
                        "areaCode": "320113001",
                        "areaName": "尧化街道",
                        "total": 45,
                        "normal": 45,
                        "alert": 0,
                        "offline": 0
                    },
                    {
                        "areaCode": "320113002",
                        "areaName": "马群街道",
                        "total": 132,
                        "normal": 70,
                        "alert": 58,
                        "offline": 4
                    },
                    {
                        "areaCode": "320113003",
                        "areaName": "迈皋桥街道",
                        "total": 149,
                        "normal": 107,
                        "alert": 28,
                        "offline": 14
                    },
                    {
                        "areaCode": "320113004",
                        "areaName": "燕子矶街道",
                        "total": 170,
                        "normal": 102,
                        "alert": 60,
                        "offline": 8
                    },
                    {
                        "areaCode": "320113005",
                        "areaName": "栖霞街道",
                        "total": 2,
                        "normal": 1,
                        "alert": 0,
                        "offline": 1
                    },
                    {
                        "areaCode": "320113006",
                        "areaName": "龙潭街道",
                        "total": 92,
                        "normal": 49,
                        "alert": 33,
                        "offline": 10
                    },
                    {
                        "areaCode": "320113007",
                        "areaName": "仙林街道",
                        "total": 56,
                        "normal": 39,
                        "alert": 13,
                        "offline": 4
                    },
                    {
                        "areaCode": "320113009",
                        "areaName": "八卦洲街道",
                        "total": 0,
                        "normal": 0,
                        "alert": 0,
                        "offline": 0
                    },
                    {
                        "areaCode": "320113010",
                        "areaName": "西岗街道",
                        "total": 0,
                        "normal": 0,
                        "alert": 0,
                        "offline": 0
                    }
                ]
            };
            let streetArr = [];
            let streetCountArr = [];
            //$('#left-count-title').html('各街道当前报警设备数');
            $.each(res.result.sort(compare("alert")), function (index, el) {
                streetArr.push(el.areaName);
                streetCountArr.push(el.alert);
            });
            var color1 = '#ff3b3b';
            var color2 = '#d7040a';

            var option = {
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '7%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    type: 'value',
                    minInterval: 1,

                    show: false
                }],
                yAxis: [{
                    type: 'category',
                    data: streetArr,
                    axisLine: {
                        show: false,
                    },

                    axisLabel: {
                        color: '#359FAE',
                        fontSize: '10'
                    },
                    axisTick: {
                        show: false
                    },
                }],
                series: [{
                    name: '设备数量',
                    data: streetCountArr,
                    type: 'bar',
                    barWidth: '60%',
                    label: {
                        show: true,
                        position: 'right',
                        color: ['#fff']
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: color1
                            }, {
                                offset: 1,
                                color: color2
                            }]),
                        }
                    },

                }]
            };
            var myChart = echarts.init(document.getElementById('left-count-chart'));
            //使用制定的配置项和数据显示图表
            //myChart.setOption(option);
            var str = '';
            var streetList = [];
            var streetObj = {};
            $.each(res.result, function (index, el) {
                if (el.alert != 0) {
                    streetList.push(el.areaCode);
                    streetObj[el.areaCode] = {
                        "name": el.areaName,
                        "total": el.total,
                        "normal": el.normal,
                        "alarm": el.alert
                    };
                    str = str + `<div class="map-icon map-w street-${el.areaCode}" data-code=${el.areaCode}></div>`
                }
            });
            $('.map-point').append(str);

        }
    });

})



queryDataCountByDays = () => {

    AjaxRequest('/device/countbyday?days=15', callBack)

    function callBack(res) {
        let dataArr = [];
        let totalArr = [3457, 3645, 3145, 3571, 3574, 3887, 2972, 3157, 3331, 3476, 3724, 3245, 3571, 3235, 3114];
        let normalArr = [3360, 3520, 3123, 3361, 3549, 3821, 2919, 3142, 3318, 3415, 3678, 3192, 3447, 3180, 3016];
        let alertArr = [97, 125, 22, 210, 25, 66, 53, 15, 13, 61, 46, 53, 124, 55, 98];


        $.each(res.result, function (index, el) {
            dataArr.push(el.day.substring(5));
        });

        var option = {
            color: ['#17E0BC', '#FD0202'],
            grid: {
                top: '10%',
                left: '3%',
                right: '3%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                type: 'category',
                data: dataArr,
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#13559F',
                        width: 2
                    }
                },
                axisLabel: {
                    color: '#13559F',
                    fontSize: '10'
                },
                axisTick: {
                    show: false
                },
            }],
            yAxis: [{
                type: 'value',
                minInterval: 1,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#13559F',
                        width: 2
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(19, 85, 159,0.2)'
                    }
                },
                axisLabel: {
                    color: '#13559F',
                    fontSize: '10'
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '上报总数',
                data: totalArr,
                type: 'bar',
                barWidth: '50%',
                showBackground: true,
                label: {
                    show: true,
                    position: 'top',
                    fontSize: '10',
                    color: ['#fff']
                },
                backgroundStyle: {
                    color: 'rgba(12, 53, 104, 0.6)'
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#7BB4F1'
                        }, {
                            offset: 1,
                            color: '#5C96E7'
                        }]),
                    }
                },

            }, {
                name: '正常',
                data: normalArr,
                type: 'line',

            }, {
                name: '告警',
                data: alertArr,
                type: 'line',
            }]
        };
        var myChart = echarts.init(document.getElementById('middle-chart-body'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    }
}

/*按街道统计设备数量*/
queryDeviceCountByStreets = (type) => {
    AjaxRequest('/firepm/device/countbystreet', callBack)

    function callBack(res) {
        let streetArr = [];
        let streetCountArr = [];
        // if (type == 1) {

        // } else if (type == 2) {
        //     $('#left-count-title').html('各街道当前报警设备数');
        //     $.each(res.result, function(index, el) {
        //         streetArr.push(el.areaName);
        //         streetCountArr.push(el.alert);
        //     });
        //     var color1 = '#ff3b3b';
        //     var color2 = '#d7040a';
        // }
        $('#left-count-title').html('单位安全指数排名');
        $.each(res.result, function (index, el) {
            streetArr.push(el.areaName);
            streetCountArr.push(el.total);
        });
        var color1 = '#17E0BC';
        var color2 = '#13559F';

        var option = {
            grid: {
                top: '3%',
                left: '3%',
                right: '7%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                type: 'value',
                minInterval: 1,

                show: false
            }],
            yAxis: [{
                type: 'category',
                data: ['栖霞政务中心', '马群紫东创业园', '白云会议中心', '三宝科技', '马群科创中心', '马群', '马群', '马群', '马群'],
                axisLine: {
                    show: false,
                },

                axisLabel: {
                    color: '#359FAE',
                    fontSize: '10'
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '设备数量',
                data: [97, 92, 89, 85, 77, 72, 69, 61, 52],
                type: 'bar',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'right',
                    color: ['#fff']
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: color1
                        }, {
                            offset: 1,
                            color: color2
                        }]),
                    }
                },

            }]
        };
        var myChart = echarts.init(document.getElementById('left-count-chart'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    }

}


/*全区总览*/
queryOversize = () => {
    AjaxRequest('/firepm/device/countbystatus', callBack1)

    function callBack1(res) {
        var data = res.result.firepm[0];
        $('.left-overview-top>div').eq(0).find('div').eq(1).html(Math.round((data.total - data.offline) / data.total * 100) + '%');
        $('.left-overview-top>div').eq(1).find('div').eq(1).html(Math.round((data.alert) / data.total * 100) + '%');
        $('.left-overview-top>div').eq(2).find('div').eq(1).html(Math.round((data.offline) / data.total * 100) + '%');

        $('#total-device').html(data.total);

        $('.map-title-count>div').eq(0).find('span').html(data.total);
        $('.map-title-count>div').eq(1).find('span').html(data.alert);
    }

    AjaxRequest('/firepm/monitordays', callBack2)

    function callBack2(res) {
        $('#monitor-days').html(res.result.monitor_days);

    }

    AjaxRequest('/area/countbytype', callBack3)


    function callBack3(res) {
        $('#school-num').html(res.result.schoolNum);
        $('#community-num').html(res.result.communityNum);
        $('#hospital-num').html(res.result.hospitalNum);
        $('#factory-num').html(res.result.factoryNum);
        $('#large-complex-num').html(res.result.largeComplexNum);


        $('#high-building').html(res.result.highBuildingNum);
    }
}

/*告警列表轮播*/
alarmList = () => {
    $('.right-alert-list').html('');
    AjaxRequest('/order/list?pageNum=1&pageSize=15&status=0&pm=1&type=0', callBack)

    function callBack(res) {
        let str = '';
        $.each(res.result.data, function (index, el) {
            str = str + `<div class="right-alert-list-item">
                            <div class="right-alert-list-item-icon"></div>
                            <div>
                                <div>${el.time}&nbsp;&nbsp;&nbsp;&nbsp;${el.event}</div>
                                <div>地点：${el.deviceName}</div>
                            </div>
                        </div>`
        });
        $('.right-alert-list').append(str);

        setInterval(function () {
            $('.right-alert-list-item').eq(0).addClass('list-fly').siblings().removeClass('list-fly');
            $('.right-alert-list-item').eq(0).clone().appendTo(".right-alert-list");

            setTimeout(function () { $('.right-alert-list-item').eq(0).remove(); }, 500);

        }, 3000);
    }
}

var mapVal;
/*地图图标*/
setMarkerIntoMap = () => {
    $('.map-point').html('');
    $('.map-msg').remove();

    let res = {
        "status": 200,
        "message": "OK",
        "result": [
            {
                "areaCode": "320113001",
                "areaName": "尧化街道",
                "total": 45,
                "normal": 45,
                "alert": 0,
                "offline": 0
            },
            {
                "areaCode": "320113002",
                "areaName": "马群街道",
                "total": 132,
                "normal": 70,
                "alert": 58,
                "offline": 4
            },
            {
                "areaCode": "320113003",
                "areaName": "迈皋桥街道",
                "total": 149,
                "normal": 107,
                "alert": 28,
                "offline": 14
            },
            {
                "areaCode": "320113004",
                "areaName": "燕子矶街道",
                "total": 170,
                "normal": 102,
                "alert": 60,
                "offline": 8
            },
            {
                "areaCode": "320113005",
                "areaName": "栖霞街道",
                "total": 2,
                "normal": 1,
                "alert": 0,
                "offline": 1
            },
            {
                "areaCode": "320113006",
                "areaName": "龙潭街道",
                "total": 92,
                "normal": 49,
                "alert": 33,
                "offline": 10
            },
            {
                "areaCode": "320113007",
                "areaName": "仙林街道",
                "total": 56,
                "normal": 39,
                "alert": 13,
                "offline": 4
            },
            {
                "areaCode": "320113009",
                "areaName": "八卦洲街道",
                "total": 0,
                "normal": 0,
                "alert": 0,
                "offline": 0
            },
            {
                "areaCode": "320113010",
                "areaName": "西岗街道",
                "total": 0,
                "normal": 0,
                "alert": 0,
                "offline": 0
            }
        ]
    };
    let streetArr = [];
    let streetCountArr = [];
    $('#left-count-title').html('单位安全指数排名');
    $.each(res.result.sort(compare("total")), function (index, el) {
        streetArr.push(el.areaName);
        streetCountArr.push(el.total);
    });
    var color1 = '#17E0BC';
    var color2 = '#13559F';

    var option = {
        grid: {
            top: '3%',
            left: '3%',
            right: '7%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            type: 'value',
            minInterval: 1,

            show: false
        }],
        yAxis: [{
            type: 'category',
            data: ['超宇科技', '紫东国际创业园', '白云会议中心', '三宝科技', '马群科创中心', '栖霞区医院', '东花港物业', '紫东国际创业园', '栖霞政务中心'],
            axisLine: {
                show: false,
            },

            axisLabel: {
                color: '#359FAE',
                fontSize: '10'
            },
            axisTick: {
                show: false
            },
        }],
        series: [{
            name: '设备数量',
            data: [52, 61, 69, 72, 77, 85, 89, 92, 97],
            type: 'bar',
            barWidth: '60%',
            label: {
                show: true,
                position: 'right',
                color: ['#fff']
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: color1
                    }, {
                        offset: 1,
                        color: color2
                    }]),
                }
            },

        }]
    };
    var myChart = echarts.init(document.getElementById('left-count-chart'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
    var str = '';
    var streetList = [];
    var streetObj = {};
    $.each(res.result, function (index, el) {
        if (el.total != 0) {
            streetList.push(el.areaCode);
            streetObj[el.areaCode] = {
                "name": el.areaName,
                "total": el.total,
                "normal": el.normal,
                "alarm": el.alert
            };
            if (el.total <= 50) {
                var iconClass = 'map-s';
            } else if (el.total > 50 && el.total <= 100) {
                var iconClass = 'map-m';
            } else {
                var iconClass = 'map-l';
            }
            str = str + `<div class="map-icon ${iconClass} street-${el.areaCode}" data-code=${el.areaCode}></div>`
        }
    });
    $('.map-point').append(str);

    /*地图街道详情轮播*/

    var streetList1 = streetList;
    var streetList2 = [];
    markerCarousel();
    clearInterval(mapVal);
    mapVal = setInterval(function () { markerCarousel() }, 5000);

    function markerCarousel() {
        $('.map-msg').remove();

        if (streetList1.length != 0) {
            var code = streetList1[0];
            streetList2.push(streetList1[0])
            streetList1 = streetList1.slice(1);
            var streetPoint = $('.street-' + code);
            streetPoint.addClass('active').siblings().removeClass("active");
            var streetMsg = $('.map-body');
            if (code == '320113006') {
                var top = streetPoint.css("top");
                var left = 'calc(' + streetPoint.css("left") + ' - 1.2rem)';
            } else {
                var top = 'calc(' + streetPoint.css("top") + ' - 1rem)';
                var left = 'calc(' + streetPoint.css("left") + ' - 0.1rem)';
            }

            streetMsg.append(`
                <div class="map-msg" style="top:${top};left:${left};">
                    <div>
                        <div>${streetObj[code].name}</div>
                        <div>总数&nbsp;<span>${streetObj[code].total}</span></div>
                    </div>
                    <div>
                        <div>正常&nbsp;&nbsp;<span>${streetObj[code].normal}</span></div>
                        <div>告警&nbsp;&nbsp;<span>${streetObj[code].alarm}</span></div>
                    </div>
                </div>
                    `)

        } else {
            streetList1 = streetList;
            streetList2 = [];
        }
    }


    $(".map-icon").hover(function () {
        clearInterval(mapVal);
        $(this).addClass('active').siblings().removeClass("active");
        $('.map-msg').remove();
        var code = $(this).data('code');
        var streetPoint = $('.street-' + code);
        if (code == '320113006') {
            var top = streetPoint.css("top");
            var left = 'calc(' + streetPoint.css("left") + ' - 1.2rem)';
        } else {
            var top = 'calc(' + streetPoint.css("top") + ' - 1rem)';
            var left = 'calc(' + streetPoint.css("left") + ' - 0.1rem)';
        }

        $('.map-body').append(`
                <div class="map-msg" style="top:${top};left:${left};">
                    <div>
                        <div>${streetObj[code].name}</div>
                        <div>总数&nbsp;<span>${streetObj[code].total}</span></div>
                    </div>
                    <div>
                        <div>正常&nbsp;&nbsp;<span>${streetObj[code].normal}</span></div>
                        <div>告警&nbsp;&nbsp;<span>${streetObj[code].alarm}</span></div>
                    </div>
                </div>
                    `)

    }, function () {
        mapVal = setInterval(function () { markerCarousel() }, 5000);
    });

}


var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
}